<template>
	<view class="entry-wrap">
		<view class="img-list">
			<image :src="img" mode="" v-for="(img, index) in data.Assets[0].ImgUrls" :key="index"></image>
		</view>
		<view class="col-white p-2">
			<view class="flex-between-center">
				<text class="h1-font text-ellipsis m-col17" style="font-weight: 600;">{{data.Assets[0].Name}}</text>
			</view>
			<view class="h3-font-dim-gray mt-m1" >{{data.Assets[0].OrgName}}</view>
			<view class="flex-between-center mt-1 mb-1">
				<view class="asset-type-num">
					<view class="h5-font-dim-gray">类型</view>
					<view class="h1-font-royal-blue mt-m18">{{data.Assets[0].AssetTypeText}}</view>
				</view>
				<view class="m-col12">
					<view class="flex-start">
						<u-line color="#ECECF0" direction="col" length="50rpx"></u-line>
						<view class="ml-2">
							<view class="h5-font-dim-gray">数量</view>
							<view class="h1-font-royal-blue mt-m18">1件</view>
						</view>
					</view>
				</view>
			</view>
			<view class="flex-between-center mt-32">
				<text class="h5-font-light-gray flex-between-center m-col12">{{data.OperateTime | dateFormat}}录入</text>
			</view>
			<view class="asset-id-bg p-m2 mt-m18" :style="tidWrapExtend ? '' : 'height: 130rpx;overflow: hidden;position: relative;'">
				<view class="h4-font-dim-gray">
					<text decode="true">资产ID:&emsp;{{data.Assets[0].EpcId}}</text>
				</view>
				<view class="h4-font-dim-gray mt-m24" v-for="tid in data.Assets[0].Tids" :key="tid">
					<text decode="true">标签ID:&emsp;{{tid}}</text>
				</view>
				<view v-show="!tidWrapExtend" @click="tidWrapExtend = true" style="font-size: 24rpx;color: #2E73E5;position: absolute;right: 20rpx;bottom: 20rpx;">展开<image style="width: 20rpx;height: 10rpx;vertical-align: middle;" src="../../../../static/images/arrow-down7.svg" mode=""></image></view>
			</view>
			<view>
				<view class="mt-3 h3-font">描述</view>
				<view class="mt-30 mb-30 h5-font-dim-gray" style="min-height: 200rpx;">
					<text decode="true">
						{{data.Assets[0].Describe}}
					</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: ['data'],
		data() {
			return {
				tidWrapExtend: false,
			}
		}
	}
</script>

<style lang="scss" scoped>
	.entry-wrap {
		margin-top: 40rpx;
		background-color: #FFFFFF;
		.img-list {
			padding: 20rpx 40rpx 0;
			image {
				width: 200rpx;
				height: 200rpx;
				margin-right: 20rpx;
			}
		}
	}
	.asset-status {
		background-color: rgba(84, 224, 164, 0.1);
		color: #2DC35E;
		text-align: center;
		align-items: center;
	}
	
	.asset-warnning {
		background-color: rgba(229, 93, 93, 0.1);
		color: #E55D5D;
		text-align: center;
		align-items: center;
	}
	
	.asset-transfer {
		background-color: rgba(46, 115, 229, 0.1);
		color: #2E73E5;
		text-align: center;
		align-items: center;
	}
	
	.btn-transfert {
		width: 212rpx;
		height: 80rpx;
		margin-right: 20rpx;
		color: #3278E6;
		border: 1px solid #3278E6;
	}
	
	.asset-id-bg {
		background-color: #F6F8FB;
	}
	
	.asset-check-tip {
		width: 100%;
		height: 160rpx;
		background-color: #F2F2F2;
		align-items: center;
	}
	
	.bottom-layout {
		width: 100%;
		height: 120rpx;
		border-top-style: 1rpx solid;
		background-color: #FFFFFF;
		bottom: 0; //可以更改为自己的需求距离底部的长度
		position: fixed;
	
		.operated-record-hove {
			color: #2E73E5;
		}
	
		.btn {
			width: 212rpx;
			height: 80rpx;
			background: linear-gradient(310deg, #5BABF4 0%, #2E73E5 100%);
			color: white;
		}
	
		.btn2 {
			width: 670rpx;
			height: 80rpx;
			background: linear-gradient(310deg, #5BABF4 0%, #2E73E5 100%);
			color: white;
		}
	}
</style>
